<!-- 设备维修/售后记录 -->
<template>
	<view class="page">
		<template v-if="token && isLogin">
			<!-- 维修记录 -->
			<template v-if="type == 1">
				<!-- <view class="h45 m-b2">
					<view class="fix-wrap limit-tab">
						<view class="item active">
							<view class="name">全部记录</view>
							<view class="active-line"></view>
						</view>
						<view class="item">
							<view class="name">维修中</view>
							<view class="active-line"></view>
						</view>
						<view class="item">
							<view class="name">已完成</view>
							<view class="active-line"></view>
						</view>
					</view>			
				</view> -->
				<view class="body">
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<template v-if="list.data.length > 0">
							<view class="list">
								<navigator
									:url="'/package_common/dev_mend_detail/dev_mend_detail?type=1&id=' + item.id"
									hover-class="none"
									class="order-item"
									v-for="(item, index) in list.data"
									:key="index"
								>
									<view class="hd">
										<view class="order-number">
											故障状态：
											<text class="f-red">{{ item.report_state }}</text>
										</view>
									</view>
									<view class="dev-info">
										<view class="pic">
											<image v-if="item.filelist.length > 0" :src="image_path + item.filelist[0].file_path + '&type=3&size=1'" mode="widthFix"></image>
											<image v-else src="@/static/images/img_empty.png" mode="widthFix"></image>
										</view>
										<view class="info">
											<view class="dev-name">{{ item.dev_name }}</view>
											<view class="text">申请人：{{ item.report_name }}</view>
											<view class="text">申请时间：{{ item.create_time }}</view>
										</view>
									</view>
								</navigator>
							</view>
							<loading :loadingState="loadingState"></loading>
						</template>
						<empty v-else msg="暂无维修记录"></empty>
					</template>
				</view>
			</template>

			<!-- 售后记录 -->
			<template v-if="type == 2">
				<!-- <view class="h45 m-b2">
					<view class="fix-wrap limit-tab">
						<view class="item active">
							<view class="name">全部记录</view>
							<view class="active-line"></view>
						</view>
						<view class="item">
							<view class="name">维修中</view>
							<view class="active-line"></view>
						</view>
						<view class="item">
							<view class="name">已完成</view>
							<view class="active-line"></view>
						</view>
					</view>			
				</view> -->
				<view class="body">
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<template v-if="list.data.length > 0">
							<view class="list">
								<navigator
									:url="'/package_common/dev_mend_detail/dev_mend_detail?type=2&id=' + item.id"
									hover-class="none"
									class="order-item"
									v-for="(item, index) in list.data"
									:key="index"
								>
									<view class="hd">
										<view class="order-number">
											<text>售后类型：</text>
											<text v-if="item.job_type == 2" class="f-red">维护</text>
											<text v-if="item.job_type == 3" class="f-red">维修</text>
										</view>
									</view>
									<view class="dev-info">
										<view class="pic">
											<image v-if="item.filelist.length > 0" :src="image_path + item.filelist[0].file_path + '&type=2&size=1'" mode="widthFix"></image>
											<image v-else src="@/static/images/img_empty.png" mode="widthFix"></image>
										</view>
										<view class="info">
											<view class="dev-name">{{ item.dev_name }}</view>
											<view class="text">维修师傅：{{ item.worker_name }}</view>
											<view class="text">维修时间：{{ item.create_time }}</view>
										</view>
									</view>
								</navigator>
							</view>
							<loading :loadingState="loadingState"></loading>
						</template>
						<empty v-else msg="暂无售后记录"></empty>
					</template>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
import loading from '@/components/loading-more.vue';
import empty from '@/components/empty.vue';
export default {
	name: '',
	data() {
		return {
			type: '',
			appid: getApp().globalData.appid,
			token: uni.getStorageSync('token'),
			isLogin: false,
			number: '',
			params: {
				page: '1',
				limit: 10
			},
			loadingState: {
				default: true,
				loading: false,
				completed: false
			},
			list: {
				total: 0,
				data: []
			},
			image_path: getApp().globalData.image_path
		};
	},
	async onLoad(params) {
		console.log(params);
		this.type = params.type;
		this.number = params.number;

		if (this.token) {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				if (this.type == 1) {
					this.getListReportInfo();
				} else if (this.type == 2) {
					this.getListRepairsInfo();
				}
			} else {
				this.isLogin = await this.$loginState('reset');
			}
		}
	},
	async onShow() {
		if (this.loginStateUpdate) {
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			this.isLogin = true;
			this.loginStateUpdate = false;
			if (this.type == 1) {
				this.getListReportInfo();
			} else if (this.type == 2) {
				this.getListRepairsInfo();
			}
		}

		if (!this.token && !this.isLogin) {
			this.isLogin = await this.$loginState('reset');
		}
	},
	onReady() {
		setTimeout(() => {
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '故障记录'
				});
			} else if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: '维修记录'
				});
			}
		}, 100);
	},
	onReachBottom() {
		if (this.loadingState.completed) {
			this.params.page = 0;
			return false;
		} else {
			this.params.page++;
			if (this.type == 1) {
				this.getListReportInfo();
			} else if (this.type == 2) {
				this.getListRepairsInfo();
			}
		}
	},
	methods: {
		// 获取维修记录
		getListReportInfo: async function() {
			let res = await this.$api.tool_api.getListReportInfo({
				appid: this.appid,
				token: this.token,
				number: this.number,
				page: this.params.page,
				limit: 10
			});
			if (res.data.ret == 1000) {
				this.loadingState.default = false;
				this.list.total = res.data.total;
				this.list.data = this.list.data.concat(res.data.data);
				if (res.data.data.length < this.params.limit) {
					this.loadingState.loading = false;
					this.loadingState.completed = true;
				} else {
					this.loadingState.loading = true;
				}
			} else if (res.data.ret == 1002) {
				this.loadingState.default = false;
				this.loadingState.loading = false;
				this.loadingState.completed = true;
			}
		},

		// 获取维修记录
		getListRepairsInfo: async function() {
			let res = await this.$api.tool_api.getListRepairsInfo({
				appid: this.appid,
				token: this.token,
				number: this.number,
				page: this.params.page,
				limit: this.params.limit
			});
			if (res.data.ret == 1000) {
				this.loadingState.default = false;
				this.list.total = res.data.total;
				this.list.data = this.list.data.concat(res.data.data);
				if (res.data.data.length < this.params.limit) {
					this.loadingState.loading = false;
					this.loadingState.completed = true;
				} else {
					this.loadingState.loading = true;
				}
			} else if (res.data.ret == 1002) {
				this.loadingState.default = false;
				this.loadingState.loading = false;
				this.loadingState.completed = true;
			}
		}
	},
	computed: {},
	components: {
		loading,
		empty
	}
};
</script>

<style lang="less">
.limit-tab {
	background: #fff;
}
.list {
	.order-item {
		margin-bottom: 20rpx;
		background: #fff;
	}
}
.order-item {
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	background: #fff;
	.hd {
		display: flex;
		justify-content: space-between;
		padding-right: 20rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid #eee;
		font-size: 28rpx;
		.order-number {
		}
		.state {
			color: #ff4343;
		}
	}
	.dev-info {
		display: flex;
		padding: 20rpx 20rpx 20rpx 0;
		.pic {
			width: 25%;
			max-height: 140rpx;
			margin-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			overflow: hidden;
			image {
				width: 100%;
			}
		}
		.info {
			flex-grow: 2;
			.dev-name {
				margin-bottom: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
			.text {
				margin-bottom: 10rpx;
				font-size: 28rpx;
				color: #999;
			}
		}
	}
}
</style>
